<template>
    <div id="indexHeader">
        <!-- 头部 -->
        <header>
            <!-- 用于ios沉浸式状态栏 -->
            <div class="iosStatus" v-if="this.$store.state.device === 'ios'? true : false"></div>
            <div class="top_bar">
                <div class="logo" @click.stop.prevent='goTop'></div>
                <div class="search" @click.stop="$router.push('/search')">
                    <div class="search_wrap">
                        <i class="icon-search"></i>
                        <div class="hot_topic">{{hot_topic}}</div>
                    </div>
                </div>
            </div>
        </header>
    </div>
</template>
<script>
export default {
    data() {
        return {
            hot_topic: '搜你想搜的'
        }
    },
    methods: {
        goTop() {
            $(`.container.${this.indexActive}`).animate({scrollTop: 0})
        }
    }
}
</script>
<style lang='stylus'>
ios_height = 0.535rem
header_height = 1.335rem
nav_height = 0.96rem
menu_width = 1.06rem
#indexHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    overflow: hidden;
    .iosStatus {
        width: 100%;
        height: ios_height;
    }
    header {
        display: block;
        position: relative;
        overflow: hidden;
        background-color: #f34e4e;
        color: #fff;
        .top_bar {
            position: relative;
            height: header_height;
            user-select: none;
            display: flex;
            align-items: center;
            .logo{
                flex: 1.5;
                height: 100%;
                margin-left: 0.4rem;
            }
            .search{
                flex: 2.5;
                height: 100%;
                padding: 0.3rem 0.4rem 0.25rem;
                color: #b8bbbf;
                overflow: hidden;
                .search_wrap{
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    border: 1px solid #ddd;
                    border-radius: 3px;
                    background: #fff;
                    overflow: hidden;
                    padding: 0 0.267rem;
                    .icon-search{
                        font-size: 15px;
                    }
                    .hot_topic{
                        margin-left: 0.16rem
                        font-size: 14px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    nav {
        position: relative;
        background-color: #ffffff;
        border-bottom: 1px solid #e8e8e8;
        padding-right: menu_width;
        .nav_ul {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
            font-size: 0;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                display: none;
            }
            a {
                display:table-cell;
                *display:inline-block;
                vertical-align: middle;
                padding: 0 0.267rem;
                margin-left: 0.133rem;
                height: nav_height;
                font-size: 15px;
                color: #505050;
                white-space: nowrap;
                -webkit-tap-highlight-color: rgba(0, 0, 0, .3);
                text-decoration: none;
                &:last-child {
                    margin-right: 0.133rem;
                }
                &.active {
                    color: #f34e4e;
                    font-size: 16px;
                }
            }
        }
        .nav_menu {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            .shadow {
                position: absolute;
                width: 0.267rem;
                height: 100%;
                left: -0.267rem;
                background-size: contain;
                background-color: rgba(244, 245, 246, .3);
            }
            .more_btn {
                display: block;
                width: menu_width;
                height: 100%;
                background-size: 16px;
                background-color: #f4f5f6;
            }
        }
    }
}
</style>
<style>
#indexHeader .logo {
    background: url(~@/assets/img/news_logo.png)no-repeat center center;
    background-size: contain;
}
#indexHeader .shadow {
    background: url(~@/assets/img/shadow.png) no-repeat 100%;
}

#indexHeader .more_btn {
    background: url(~@/assets/img/menu_more.png) no-repeat 50%;
}
</style>
